<!--
 * @Author: your name
 * @Date: 2021-11-19 21:18:48
 * @LastEditTime: 2021-11-20 17:48:06
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\swyzt\index.vue
-->
<template>
  <div class="swyzt">
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInLeft faster"
      leave-active-class="animated fadeOutLeft faster"
    >
      <div class="swlinks" v-show="show">
        <div
          @click="swlinkClick(item)"
          class="swlink"
          v-for="item in links"
          :key="item.path"
          :style="{
            color: IsActive.indexOf(item.path) !== -1 ? '#5BD9FE' : '#ffffff80',
          }"
        >
          <img
            :src="IsActive.indexOf(item.path) !== -1 ? IsActiveimg : bgimg"
            alt=""
          />
          {{ item.name }}
        </div>
      </div>
    </transition>
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInRight"
      leave-active-class="animated fadeOut"
    >
      <router-view />
    </transition>
  </div>
</template>

<script>
import IsActiveimg from "../../../assets/images/init/路径 48.png";
import bgimg from "../../../assets/images/init/路径 48-1.png";
export default {
  data() {
    return {
      show: false, //动画效果
      IsActiveimg,
      bgimg,
      IsActive: "",
      links: [
        {
          name: "水资源",
          path: "/home/swyzt/sssw",
        },
        {
          name: "水务现状",
          path: "/home/swyzt/swxz",
        },
        {
          name: "水务监测",
          path: "/home/swyzt/swjc",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    swlinkClick(val) {
      this.IsActive = val.path;
      this.$router.push(val.path);
    },
  },
  created() {},
  mounted() {
    this.show = true;
    this.IsActive = this.$route.path;
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style lang="scss" scoped>
.swyzt {
  width: 100%;
  height: 100%;
}
.swlinks {
  width: 186px;
  height: 638px;
  background: url("../../../assets/images/init/Group 683.png") no-repeat
    center/cover;
  position: absolute;
  left: 60px;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  .swlink {
    margin: 19px 0;
    width: 111px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    position: relative;
    right: 20px;
    z-index: 10;
    transition: all 0.2s;
    cursor: pointer;
    &:hover {
      color: #5bd9fe !important;
    }
    &.swlink:nth-of-type(1) {
      right: 30px;
    }
    &.swlink:nth-of-type(3) {
      right: 30px;
    }
    // background: #000;
    img {
      z-index: -1;
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }

    // background: url("../../../../assets/images/init/路径 48-1.png");
  }
}
</style>
